<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>任务工单项</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/style/admin.css" media="all">
    <style>
        #layer-images img {
            width: 160px;
            height: 160px;
            margin: 5px;
        }
    </style>
</head>
<body>

<div class="layui-fluid" id="LAY-app-message">
    <div class="layui-card">
        <div class="layui-card-header">基本信息</div>
        <div class="layui-card-body">
            <form class="layui-form" action="#" lay-filter="work-task-item-form">
                <input type="hidden" name="id">
                <div class="layui-row">
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">工单号</label>
                            <div class="layui-input-block">
                                <input type="text" name="workTaskNo" class="layui-input" v-model="form.workTaskNo" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设施设备</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceName" class="layui-input" :value="form.deviceName" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">位置信息</label>
                            <div class="layui-input-block">
                                <input type="text" name="deviceLocation" class="layui-input" v-model="form.deviceLocation" readonly >
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">任务名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">备注</label>
                            <div class="layui-input-block">
                                <input type="text" name="note" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">执行人</label>
                            <div class="layui-input-block">
                                <input type="text" name="executeByName" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">通知人</label>
                            <div class="layui-input-block">
                                <input type="text" name="notifyNames" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">随行车辆</label>
                            <div class="layui-input-block">
                                <input type="text" name="vehicle" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">随行司机</label>
                            <div class="layui-input-block">
                                <input type="text" name="driver" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修工具</label>
                            <div class="layui-input-block">
                                <input type="text" name="tools" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">维修材料</label>
                            <div class="layui-input-block">
                                <input type="text" name="materials" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">开始时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="startTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">结束时间</label>
                            <div class="layui-input-block">
                                <input type="text" name="endTime" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <input type="text" name="stateText" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                        <div class="layui-form-item">
                            <label class="layui-form-label">审核结果</label>
                            <div class="layui-input-block">
                                <input type="text" name="auditResultText" class="layui-input" readonly>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">完成情况</label>
                            <div class="layui-input-block">
                                <textarea readonly class="layui-textarea" name="completion"></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">审核意见</label>
                            <div class="layui-input-block">
                                <textarea class="layui-textarea" id="audit-comment" name="auditComment"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-header">现场照片（共<span id="imgs-count"></span>张）</div>
        <div class="layui-card-body">
            <div id="layer-images"></div>
        </div>
    </div>
    <div id="operation-btns" style="text-align: center;display: none;">
        <button id="audit-btn1" class="layui-btn">通过</button>
        <button id="audit-btn2" class="layui-btn layui-btn-primary">不通过</button>
        <button id="cancel-btn" class="layui-btn layui-btn-danger">撤销</button>
    </div>
</div>
<script id="activities-tpl" type="text/html">
    <ul class="layui-timeline">
        {{# layui.each(d, function(index, item){ }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
            <div class="layui-timeline-content layui-text">
                <h4 style="font-weight: bold;">{{item.name}}【{{item.ownerName}}】</h4>
                <p>{{item.completeTime||'待完成'}}</p>
            </div>
        </li>
        {{# }); }}
        {{# if(d.length === 0){ }}
        暂无流程数据
        {{# } }}
    </ul>
</script>
<script src="/layui/layui.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/common.js"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'form', 'laytpl', 'util'], function () {
        var $ = layui.$;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var id = getParam('id');
        layui.util.fixbar();

        loadForm(id);

        function loadForm(id) {
            $.get('work-task-items/' + id, function (result) {
                //工单信息
                var data = result.data;
                form.val('work-task-item-form', data);
                if(data.state == 3){
                    $('#operation-btns').show();
                }
                //加载上传图片
                if (data.imgs) {
                    var images = data.imgs.split(',');
                    $("#layer-images").empty();
                    for (var i in images) {
                        var img = images[i];
                        var item = '<img layer-src="/img/' + img + '" src="/img/' + img + '">';
                        $('#layer-images').append(item);
                    }
                    $('#imgs-count').text(images.length);
                    layer.photos({
                        photos: '#layer-images',
                        anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机
                    });
                }
                //流程信息
                $.get('/tasks/', {procInstId: data.procInstId}, function (res) {
                    var tpl = $('#activities-tpl').html();
                    laytpl(tpl).render(res.data, function (html) {
                        $('#layer-activities').html(html);
                    });
                });
            });
        }

        function audit(auditResult){
            let auditComment = $('#audit-comment').val();
            if (auditResult == 2 && !auditComment) {
                layer.msg('输入审核意见');
                return;
            }
            $.post('/work-task-items/audit', {
                id: id,
                auditResult: auditResult,
                auditComment: auditComment || ''
            }, function() {
                $('#operation-btns').hide();
            });
        }

        function cancel(){
            layer.confirm('确定撤销该任务项吗？', function (index) {
                $.post('/work-task-items/cancel', {
                    id: id
                }, function(res) {
                    $('#operation-btns').hide();
                });
                layer.close(index);
            });
        }

        $('#audit-btn1').on('click',function(){
            audit(1);
        });

        $('#audit-btn2').on('click',function(){
            audit(2);
        });

        $('#cancel-btn').on('click',function(){
            cancel();
        });
    });
</script>
</body>
</html>